<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 300px;
      padding: 15px;
      font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
      background-color: #f5f5f5;
    }

    .container {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .btn {
      padding: 10px 15px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .btn-primary {
      background-color: #1890ff;
      color: white;
    }

    .btn-secondary {
      background-color: #52c41a;
      color: white;
    }

    .btn:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }

    .btn:active {
      transform: translateY(1px);
    }

    .status {
      margin-top: 10px;
      padding: 10px;
      border-radius: 4px;
      font-size: 13px;
      display: none;
    }

    .status.success {
      background-color: #f6ffed;
      border: 1px solid #b7eb8f;
      color: #52c41a;
    }

    .status.error {
      background-color: #fff2f0;
      border: 1px solid #ffccc7;
      color: #ff4d4f;
    }

    .icon {
      width: 16px;
      height: 16px;
      fill: currentColor;
    }
  </style>
</head>
<body>
  <div class="container">
    <button id="captureVisible" class="btn btn-secondary">
      <svg class="icon" viewBox="0 0 1024 1024">
        <path d="M864 248H728l-32.4-90.8C691 144.5 679 136 665.4 136H358.6c-13.5 0-25.6 8.5-30.1 21.2L296 248H160c-44.2 0-80 35.8-80 80v456c0 44.2 35.8 80 80 80h704c44.2 0 80-35.8 80-80V328c0-44.2-35.8-80-80-80zM512 688c-88.4 0-160-71.6-160-160s71.6-160 160-160 160 71.6 160 160-71.6 160-160 160z"/>
      </svg>
      截取当前屏幕
    </button>
    <button id="startCapture" class="btn btn-primary">
      <svg class="icon" viewBox="0 0 1024 1024">
        <path d="M864 248H728l-32.4-90.8C691 144.5 679 136 665.4 136H358.6c-13.5 0-25.6 8.5-30.1 21.2L296 248H160c-44.2 0-80 35.8-80 80v456c0 44.2 35.8 80 80 80h704c44.2 0 80-35.8 80-80V328c0-44.2-35.8-80-80-80zM512 776c-156.4 0-284-127.6-284-284s127.6-284 284-284 284 127.6 284 284-127.6 284-284 284z"/>
      </svg>
      滚动截取整页
    </button>
    <div id="status" class="status"></div>
  </div>
  <script src="popup.js"></script>
</body>
</html>
